<template>
  <div class="app-container">
    <vxe-form
      :data="formData"
    >
      <vxe-form-item field="userName">
        <template v-slot>
          <vxe-input
            v-model="formData.userName"
            size="medium"
            placeholder="请输入用户名称"
          />
        </template>
      </vxe-form-item>
      <vxe-form-item>
        <template v-slot>
          <vxe-button type="submit" status="success" size="medium" @click="onSearchBtnClick">查询</vxe-button>
          <vxe-button type="reset" status="info" size="medium">重置</vxe-button>
        </template>
      </vxe-form-item>
    </vxe-form>
    <vxe-table
      ref="table"
      border="inner"
      size="mini"
      :data="tableData"
      @checkbox-all="selectAllEvent"
      @checkbox-change="selectChangeEvent"
    >
      <vxe-table-column type="checkbox" width="50" />
      <vxe-table-column field="instanceName" title="流程名称" />
      <vxe-table-column field="name" title="任务节点名称" />
      <vxe-table-column field="createName" title="申请人" />
      <vxe-table-column field="createTime" title="申请时间" />
      <vxe-table-column title="操作" show-overflow>
        <template v-slot="{ row }">
          <el-tooltip class="item" effect="dark" content="审批" placement="right">
            <vxe-button v-auth="['admin', 'need:apply']" size="mini" icon="iconfont icon-shenpi" status="success" @click="onEditBtnClick(row)" />
          </el-tooltip>
        </template>
      </vxe-table-column>
    </vxe-table>
    <Form v-if="detail" v-model="detail" @refData="onSearchBtnClick" />
    <vxe-pager
      :current-page.sync="formData.currentPage"
      :page-size.sync="formData.pageSize"
      :total="total"
      :page-sizes="[10, 20, 100, 200]"
      :layouts="[
        'PrevJump',
        'PrevPage',
        'Number',
        'NextPage',
        'NextJump',
        'Sizes',
        'FullJump',
        'Total',
      ]"
      @page-change="handlePageChange"
    />
  </div>
</template>
<script>
import { tasks } from '@/api/activiti/task'
import { gets } from '@/api/formdata'
import Form from './form'
export default {
  components: {
    Form
  },
  data() {
    return {
      loading: false,
      formData: {
        currentPage: 1,
        pageSize: 20
      },
      tableData: [],
      tableDetailData: [],
      multipleSelection: [],
      multipleDetailSelection: [],
      detail: null,
      details: null,
      total: 0,
      data: []
    }
  },
  created() {
    this.onSearchBtnClick()
  },
  methods: {
    selectAllEvent({ records }) {
      this.multipleSelection = records
    },
    selectChangeEvent({ records }) {
      this.multipleSelection = records
    },
    onEditBtnClick(row) {
      gets(row.gid).then((data) => {
        const rows = {}
        rows.gid = row.gid
        rows.formId = data.formId
        rows.did = row.did
        rows.id = row.id
        this.detail = rows
      })
    },
    onSearchBtnClick() {
      this.loading = false
      tasks(this.formData).then((data) => {
        this.tableData = data.list
        this.total = data.total
        this.loading = false
      })
    },
    formatTime({ cellValue, row, column }) {
      return this.$utils.toDateString(cellValue, 'yyyy-MM-dd HH:ss:mm')
    },
    handlePageChange({ currentPage, pageSize }) {
      this.formData.currentPage = currentPage
      this.formData.pageSize = pageSize
      this.onSearchBtnClick()
    }
  }
}
</script>
